<template>
<div class="main">
    <div class="advediv">
        <swiper :options="swiperOption" >
      <!-- slides -->
      <swiper-slide><p>睡觉之前坚持做两件事，不知不觉就瘦了！</p></swiper-slide>
      <swiper-slide><p>三款骁龙845新品手机，即将发布！</p></swiper-slide>
      <swiper-slide><p>卫生间18年都流行这样装修。</p></swiper-slide>
     <swiper-slide><p>胎儿体重越接近这个数，越聪明！</p></swiper-slide>
   
    </swiper> 
     
    </div>

<div class="mainImg">

        <div class="main-img1">
                <img src="static/images/main-1.jpg" alt=""/>
            
            <div class="main-img2">
                <img src="static/images/main-2.jpg" class="img2" alt=""/>
                <img src="static/images/main-3.jpg" class="img3" alt=""/>

            </div>
            <div class="main-img3">
                <img src="static/images/main-4.jpg" alt=""/>
                <img src="static/images/list-1.jpg" alt=""/>

            </div>


 </div>

    
    <div class="list-img3">
        <ul>
            <li> 
                <img src="static/images/list-2.jpg" alt=""/>
                <p class="ptitle">红米 Pro 4GB+32GB</p>
                <p class="pcontent"> 高颜值大电量 红米旗舰 / 异形全面屏....</p>
                <p class="men">929起</p>
            </li>
            <li> 
                <img src="static/images/list-3.jpg" alt=""/>
                    <p class="ptitle">红米 Pro 4GB+32GB</p>
                <p class="pcontent"> 高颜值大电量 红米旗舰 / 异形全面屏....</p>
                <p class="men">929起</p>
            </li>
            <li> 
                <img src="static/images/list-4.jpg" alt=""/>
                <p class="ptitle">红米 Pro 4GB+32GB</p>
                <p class="pcontent"> 高颜值大电量 红米旗舰 / 异形全面屏....</p>
                <p class="men">929起</p>
            
            </li>
            <li>
                
                <img src="static/images/list-5.jpg" alt=""/>
                    <p class="ptitle">红米 Pro 4GB+32GB</p>
                <p class="pcontent"> 高颜值大电量 红米旗舰 / 异形全面屏....</p>
                <p class="men">929起</p>
                
            </li>
        </ul>
        <div  class='foot'>
            <p>------我也是有底线的------</p>
        </div>
       
    </div>

  
</div>

   
</div>
</template>

<script>
import Vue from "vue";

//轮播图插件
import VueAwesomeSwiper from "vue-awesome-swiper";
//  需要样式

import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import "swiper/dist/css/swiper.css";

export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        //   // ...
        autoplay: 3000,
        direction: "vertical",
        grabCursor: true,
        setWrapperSize: true,
        sutoHeight: true,

        autoplay: 5000,
        initialSlide: 1,

        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },
        loop: true
      }
    };
  },

  components: {
    swiper,
    swiperSlide
  }
};
</script>

<style lang='scss' scoped>
$appwidth: 375;

@function pxtovw($p) {
  @return (100 / $appwidth * $p) * 1vw;
}

.main {
  width: 100%;
  background: #eee;
  box-sizing: border-box;
  //   position: relative;

  .advediv {
    width: 100%;
    margin-top: pxtovw(394);
    position: absolute;
    height: pxtovw(30);
    line-height: pxtovw(30);
    text-align: center;
    overflow: hidden;
    background: white;
    font-size: pxtovw(12);
    border-top: 5px solid #eee;
    border-bottom: 5px solid #eee;
  }

  .mainImg {
    display: flex;
    flex-direction: row;
    .main-img1 {
      display: flex;
      height: pxtovw(440);

      position: absolute;
      top: pxtovw(440);

      img {
        width: pxtovw(185);
        height: pxtovw(264);
        //   padding-right: pxtovw(2);
      }

      .main-img2 {
        display: flex;
        flex-direction: column;
        .img2 {
          height: pxtovw(131);
          padding-left: pxtovw(2);
        }
        .img3 {
          height: pxtovw(131);
          padding: pxtovw(2) 0 0 pxtovw(2);
        }
      }
      .main-img3 {
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        top: pxtovw(266);
        img:nth-child(1) {
          width: pxtovw(375);
          height: pxtovw(145);
        }
        img:nth-child(2) {
          width: pxtovw(375);
          height: pxtovw(225);
        }
      }
    }
  }

  .list-img3 {
   background: #eee;
   box-sizing: border-box;
    //   flex-direction: column;
    position: absolute;
    top: pxtovw(1080);
    
   
    ul { 
        display: flex;
        flex-wrap: wrap;
   background: white;

      li { 
          width: pxtovw(183);
          margin: pxtovw(2);
        background: #eee;
           
        img {
          width: pxtovw(183);
          height: pxtovw(183);
        }
        p{
             font-size: pxtovw(12);
        }
        .pcontent{
            color: #888;
            text-indent: pxtovw(8);
        }
        .ptitle{
            text-align: center;
            font-size: pxtovw(14);
             color: #555353;

        }
        .men{
            color: orange;
            text-align: center;
        }
      }
    
    }  
    .foot{
          margin-bottom:pxtovw(70); 
          text-align: center;
          color: #aaa;
          font-size: pxtovw(12);
          padding-top:pxtovw(12); 
      }
  }
  





}
</style>
